<template>
	<view>
		<uni-popup ref="waterQualityPopup" height="200px" type="center" :animation="false">
			<view class="mypopup">
				<view class="mypopup__head">
					<image src="../../static/img/icon-clock.png"></image>
					<text>水质检测</text>
				</view>
				<form @submit="formSubmit">
					<view class="mypopup__body">

						<view class="inputrow">
							<view class="inputrow__label">原水TDS:</view>
							<input type="text" name="OriTDStxt" placeholder="原水TDS" :value="proItem.OriTDS" />
							<view v-if="OriTDS" style="color: #DD524D;margin-top: 30rpx;">*</view>
						</view>
						<view class="inputrow">
							<view class="inputrow__label">原水水温:</view>
							<input type="text" name="OriTemperaturetxt" placeholder="原水水温" :value="proItem.OriTemperature" />
							<view v-if="OriTemperature" style="color: #DD524D;margin-top: 30rpx;">*</view>
						</view>
						<view class="inputrow">
							<view class="inputrow__label">原水硬度:</view>
							<input type="text" name="OriHardnesstxt" placeholder="原水硬度" :value="proItem.OriHardness" />
							<view v-if="OriHardness" style="color: #DD524D;margin-top: 30rpx;">*</view>
						</view>
						<view class="inputrow">
							<view class="inputrow__label">原水余氯:</view>
							<input type="text" name="OriChlorinetxt" placeholder="原水余氯" :value="proItem.OriChlorine" />
							<view v-if="OriChlorine" style="color: #DD524D;margin-top: 30rpx;">*</view>
						</view>
						<view class="inputrow">
							<view class="inputrow__label">纯水TDS:</view>
							<input type="text" name="NewTDStxt" placeholder="纯水TDS" :value="proItem.NewTDS" />
							<view v-if="NewTDS" style="color: #DD524D;margin-top: 30rpx;">*</view>
						</view>
						<view class="inputrow">
							<view class="inputrow__label">软化后硬度:</view>
							<input type="text" name="NewHardnesstxt" placeholder="软化后硬度" :value="proItem.NewHardness" />
							<view v-if="NewHardness" style="color: #DD524D;margin-top: 30rpx;">*</view>
						</view>
						<view class="inputrow">
							<view class="inputrow__label">净化余氯:</view>
							<input type="text" name="NewChlorinetxt" placeholder="净化余氯" :value="proItem.NewChlorine" />
							<view v-if="NewChlorine" style="color: #DD524D;margin-top: 30rpx;">*</view>
						</view>
						<view class="ag-divider"></view>
						<view class="mypopup__footer">
							<button class="cu-btn lg primary" form-type="submit">确定</button>
							<button class="cu-btn lg primary plain" @click="formReset()">取消</button>
						</view>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import graceChecker from "@/common/graceChecker"
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup';
	import AGInput from '../AGInput/index'
	export default {
		props: {
			proItem: {
				type: Object,
				default () {
					return {}
				}
			},
			fieldReq: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		components: {
			uniPopup,
			AGInput
		},
		data() {
			return {
				NewChlorine: false,
				OriTemperature: false,
				NewHardness: false,
				NewTDS: false,
				OriChlorine: false,
				OriHardness: false,
				OriTDS: false,
				OriTemperature: false
			}
		},
		mounted() {

		},
		methods: {
			openPoPup() {
				//console.log(this.proItem)

				console.log('fieldReq',this.fieldReq);
				let {
					NewChlorine,
					NewHardness,
					NewTDS,
					OriChlorine,
					OriHardness,
					OriTDS,
					OriTemperature
				} = this.fieldReq;
				this.NewChlorine = NewChlorine;
				this.NewHardness = NewHardness;
				this.NewTDS = NewTDS;
				this.OriChlorine = OriChlorine;
				this.OriHardness = OriHardness;
				this.OriTDS = OriTDS;
				this.OriTemperature = OriTemperature;
				this.$refs.waterQualityPopup.open();
			},
			closePoPup() {
				this.$refs.waterQualityPopup.close();
			},
			formReset() {
				this.closePoPup();
			},
			formSubmit(e) {
				let rule = [];
				if (this.OriChlorine) {
					rule.push({
						name: "OriChlorinetxt",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "原水余氯不能为空"
					})
				}
				if (this.NewChlorine) {
					rule.push({
						name: "NewChlorinetxt",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "净化余氯不能为空"
					})
				}
				if (this.NewHardness) {
					rule.push({
						name: "NewHardnesstxt",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "软化后硬度不能为空"
					})
				}
				if (this.NewTDS) {
					rule.push({
						name: "NewTDStxt",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "纯水TDS不能为空"
					})
				}
				if (this.OriHardness) {
					rule.push({
						name: "OriHardnesstxt",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "原水硬度不能为空"
					})
				}
				if (this.OriTDS) {
					rule.push({
						name: "OriTDStxt",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "原水TDS不能为空"
					})
				}
				if (this.OriTemperature) {
					rule.push({
						name: "OriTemperaturetxt",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "原水水温不能为空"
					})
				}
				let formData = e.detail.value;
				let checkRes = graceChecker.check(formData, rule);
				debugger;
				if (checkRes) {
					console.log(this.proItem, formData);
					this.$emit("onSaveWaterQuality",formData)
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
				//console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.inputrow {
		display: flex;
		flex-direction: row;

		&__label {
			width: 150rpx;
			font-size: 24rpx;
			color: #808080;
			margin-top: 10rpx;
		}

		input {
			background-color: #eeeeee;
			font-size: 20rpx;
			padding: 0 20rpx;
			height: 58rpx;
			min-height: 58rpx;
			margin-top: 10rpx;
			width: 450rpx;

			&::placeholder {
				color: #808080;
				font-size: 20rpx;
			}
		}


	}
</style>
